<template>

     <div class="order">
        <van-tabs v-model="active">
             <van-tab title="全部" class="order-status">
               <van-list class="order-list"
                 v-model="loading"
                 :finished="finished"
                 all-text="没有更多了"
                 @load="onLoad"

               >
<!--                <div v-for="item in allList" :key="item" :title="item">-->
                 <div class="list-wrapper-box" v-for="(item ,index) in allList" :key="item.id">
                   <div class="list-empty" v-if="allList==''">
                     <van-empty
                       class="custom-image"
                       :image="this.emptyImg"
                       description="没有查询到订单"
                     />
                   </div>
                   <div class="list-wrapper" v-else>
                     <div class="list-left">
                       <img src="@/assets/img/head.jpg" alt="" class="serve-headImg">
                       <van-tag round type="primary" class="server-level">LV1</van-tag>
                     </div>
                     <div class="list-right">
                       <div class="list-right-top">
                         <div class="list-right-top-left">
                           <div class="list-nickname">{{item.nickname}}</div>
                           <div class="list-grade-wrapper">
                             <van-tag type="primary" class="list-grade">{{item.grade}}</van-tag>
                           </div>
                           <div class="list-sex-wrapper">
                             <van-tag type="primary" class="icon icon-sex-1 iconfont list-sex">{{item.age}}</van-tag>
                           </div>
                         </div>
                         <div class="list-right-top-right">
                           {{item.status}}
                         </div>
                       </div>
                       <div class="list-right-bottom">
                         <div class="list-right-bottom-left">
                           <div class="list-info">下单时间：{{item.time}}</div>
                           <div class="list-info">服务类型：{{item.serverType}}</div>
                           <div class="list-info">消费：奇妙币 x {{item.fee}}</div>
                         </div>
                         <div class="list-right-bottom-right">
                           <van-button type="default" class="order-cancel">取消订单</van-button>
                         </div>
                       </div>
                     </div>
                   </div>

                 </div>


               </van-list>

           </van-tab>
           <van-tab title="待服务" class="order-status">
               <van-list
                 v-model="loading"
                 :finished="finished"
                 wait-text="没有更多了"
                 @load="onLoad"
               >
                 <van-cell v-for="item in waitList" :key="item" :title="item" />
                 <div class="list-empty" v-if="waitList==''">
                   <van-empty
                     class="custom-image"
                     :image="this.emptyImg"
                     description="没有查询到订单"
                   />
                 </div>
               </van-list>
           </van-tab>
           <van-tab title="服务中" class="order-status">
               <van-list
                 v-model="loading"
                 :finished="finished"
                 going-text="没有更多了"
                 @load="onLoad"
               >
                 <van-cell v-for="item in goingList" :key="item" :title="item" />
                 <div class="list-empty" v-if="goingList==''">
                   <van-empty
                     class="custom-image"
                     :image="this.emptyImg"
                     description="没有查询到订单"
                   />
                 </div>
               </van-list>
           </van-tab>
           <van-tab title="已服务" class="order-status">
               <van-list
                 v-model="loading"
                 :finished="finished"
                 finished-text="没有更多了"
                 @load="onLoad"
               >
                 <van-cell v-for="item in finishedList" :key="item" :title="item" />
                 <div class="list-empty" v-if="finishedList==''">
                   <van-empty
                     class="custom-image"
                     :image="this.emptyImg"
                     description="没有查询到订单"
                   />
                 </div>
               </van-list>
           </van-tab>

          <van-tab title="已取消" class="order-status">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell v-for="item in canceldList" :key="item" :title="item" />
              <div v-if="this.canceldList==''" class="list-empty">
                <van-empty
                  class="custom-image"
                  :image="this.emptyImg"
                  description="没有查询到订单"
                />
              </div>
            </van-list>
          </van-tab>
       </van-tabs>
     </div>
</template>

<script>
  import Vue from 'vue';
  import { Toast, Tab, Tabs ,List, Button } from 'vant';
  import emptyImg from '@/assets/img/empty.png'
  Vue.use(List);
  Vue.use(Toast);
  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Button);
    export default {
        name: "UserOrder",
        data: function () {
            return {
              active: 2,
              allList: [
                {id:'001',nickname:'任秋兰以为佩',grade:'中级',sex:"0",age:'25',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'5.00'},
                {id:'002',nickname:'任秋兰以为',grade:'中级',sex:"0",age:'27',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
                {id:'003',nickname:'任秋兰以',grade:'中级',sex:"0",age:'29',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
                {id:'004',nickname:'任秋兰',grade:'中级',sex:"0",age:'24',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
                {id:'005',nickname:'任秋',grade:'中级',sex:"0",age:'22',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
                {id:'006',nickname:'任',grade:'中级',sex:"0",age:'23',status:'待服务',time:'2020-05-26 09:04',serverType:'文字三十分钟',fee:'100.00'},
              ],
              waitList: [],
              goingList: [],
              finishedList: [],
              canceldList:[],
              loading: false,
              finished: false,
              emptyImg: emptyImg
            }
        },
        methods: {
          onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            // setTimeout(() => {
            //   for (let i = 0; i < 6; i++) {
            //     this.allList.push(this.allList.length + 1);
            //   }
            //
            //   for (let i = 0; i < 10; i++) {
            //     this.waitList.push(this.waitList.length + 1);
            //   }
            //
            //   for (let i = 0; i < 10; i++) {
            //     this.goingList.push(this.goingList.length + 1);
            //   }
            //
            //   for (let i = 0; i < 10; i++) {
            //     this.finishedList.push(this.finishedList.length + 1);
            //   }
            //   // 加载状态结束
            //   this.loading = false;
            //   //
            //   // // 数据全部加载完成
            //   if (this.allList.length >= 6) {
            //     this.allList = true;
            //   }
            //   // if (this.waitList.length >= 40) {
            //   //   this.waitList = true;
            //   // }
            //   // if (this.goingList.length >= 40) {
            //   //   this.goingList = true;
            //   // }
            //   // if (this.finishedList.length >= 40) {
            //   //   this.finishedList = true;
            //   // }
            // }, 1000);
          },
        },
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .order
   .order-status
     .order-list
       .list-wrapper-box
         .list-wrapper
           margin-top .3rem
           padding .3rem
           background-color #fff
           between-align-items()
           flex-wrap wrap
           .list-left
             width 1.7rem
             position relative
             .serve-headImg
               width 1.7rem
               height 1.7rem
               border-radius .1rem
             .server-level
               position absolute
               bottom 0
               display inline-block
               text-align center
               font-size .1rem
               width .8rem
               border-radius .3rem
               background #000
               color: #fff
           .list-right
             width calc(100% - 1.9rem)
             padding-left .2rem
             .list-right-top
               between-align-items()
               .list-right-top-left
                 between-align-items()
                 .list-nickname
                   font-size .3rem
                   color #333
                 .list-grade-wrapper
                   padding 0 .1rem
                   .list-grade
                     background-color #F3F0FB
                     color #A4A7CA
                     border-radius .2rem
                     font-size .24rem
                     padding 0 .15rem
                 .list-sex-wrapper
                   padding 0 .1rem
                   .list-sex
                     background-color #F3F0FB
                     color #A4A7CA
                     border-radius .2rem
                     font-size .24rem
                     padding 0 .1rem
               .list-right-top-right
                 font-size .26rem
                 color $DefaultColor
             .list-right-bottom
               padding-top .36rem
               between-align-items()
               .list-right-bottom-left
                 .list-info
                   font-size .2rem
                   color #999
                   line-height .35rem
               .list-right-bottom-right
                 .order-cancel
                   background-color $DefaultColor
                   color #fff
                   font-size .26rem
                   border-radius .3rem
                   height .6rem
         .van-list__loading
           width 100%
</style>
<style>
  .order .list-right .van-button--normal{
    padding: 0 5px;
  }
  .order .van-tab--active{
     color:#979BC2
  }
  .order  .van-tabs__line{
    background-color: transparent;
  }
  .order .van-tabs__wrap--scrollable .van-tab{
    flex: unset;
    width: 20%;
  }
  .order .list-empty .van-empty .van-empty__image{
    width: 1.8rem;
    height: 1.24rem;
  }
  .order .list-empty .van-empty .van-empty__image> img{
    width: 100%;
    height: 100%;
  }
  .order .server-level{
    right: 0;
  }
</style>
